<!-- 提交详情页 -->

<template>
<body>
	<view class="content">
		<view class="title">申请集体学习文件</view>
    <image class="image" @click="openImage" :src="imageUrl"></image>
		<view class="title">申请集体学习权限时间</view>
		<view class="section">
			<view class="section__title">开始时间：</view>
			<picker 
				mode="date" 
				:value="date" 
				disabled="true"
				:start="startDate" 
				:end="endDate" 
				@change="startDateChange"
			>
				<view class="picker">
					<span class="time timeColor"> {{startDate}} </span>
				</view>
			</picker>
		</view>
		<view class="line"></view>
		<view class="section">
			<view class="section__title">结束时间：</view>
			<picker
				mode="date" 
				:value="date" 
				:start="startDate" 
				@change="endDateChange"
			>
				<view class="picker">
					<span class="time"> {{endDate}} </span>
					<span> > </span>
				</view>
			</picker>
		</view>
		<button class="submitBtn" @click="submitBtn">提交申请</button>

		<!-- <uni-section :title="'日期时间范围用法：' + '[' + datetimerange + ']' " type="line"></uni-section>
      <view class="example-body">
        <uni-datetime-picker v-model="datetimerange" type="datetimerange"
				:border="false" :clear-icon="false"
        start="2008-3-20 12:00:00" end="2051-6-20 20:00:00" rangeSeparator="至" />
      </view> -->

  </view>
</body>
</template>


<script>
	import request from '../../../common/js/request/learning.js';
	import userInfo from '@/pagesB/common/js/request/userInfo.js';

	export default {
		
		// 页面数据
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				imageUrl: '',
				startDate: currentDate,
				endDate: '',
				datetimerange: ['', ''],
			}
		},
		watch: {
			datetimerange(newval) {  }
		},
		// 加载完毕
		onLoad(options) {
			this.imageUrl = options.imageUrl
		},
		
		// 页面初次渲染完成
		onReady() {
			// 获取系统信息
			// uni.$focus.systemInfo((sysD)=>{ this.sys = sysD; });
		},
		
		// 分享到聊天
		onShareAppMessage() {},

		// 页面事件
		methods: {
			openImage() {
				console.log('click');
			},
			startDateChange: function(e) {
				this.startDate = e.target.value
  		},
		  endDateChange: function(e) {
			this.endDate = e.target.value
		},

			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			//提交申请
			submitBtn() {
				this.submitApplyReq();
			},
			// 创建学习组
			submitApplyReq() {
				userInfo.imgUpload({
					data: {
						file: this.imageUrl, // 文件资源地址
					},
					success: (res) => {
						this.imageUrl = res.url
						request.submitApply({
							data: {
								file: this.imageUrl, // 模板文件图片
								start_time: this.startDate, // 开始时间
								end_time: this.endDate, // 结束时间
							},
							success: (res) => {
								// 成功提示
								uni.showToast({
									title: '提交申请成功',
									icon: 'success',
									duration: 1000,
									mask: true
								});
								// 延时返回上一页
								setTimeout(()=>{
								// 	// 返回上一页
									uni.navigateBack();
								}, 1000);
							},
						});
					},
				});
			},

		},
		
	}
</script>

<style>
	body{
    background-color: #F4F3F8;
	}
  .content{
	  display: flex;
    flex-direction: column;
    align-items: center;
  }
	.title{
		margin: 20rpx 0 30rpx 0;
		font-size: 30rpx;
	}
  .image {
		/* height: 700rpx; */
    max-width: 720rpx;
		max-height: 800rpx;
  }
	.section{
		width: 680rpx;
		height: 80rpx;
    line-height: 80rpx;
		display: flex;
		justify-content: space-around;
		background-color: #fff;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #353535;
	}
	.picker{
		display: flex;
		width: 400rpx;
		justify-content: space-between;
	}
	.line{
		width: 680rpx;
		height: 2rpx;
		background-color: #F4F3F8;
	}
	.submitBtn{
		width: 340rpx;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 30rpx;
		background-color: #4A87FD;
		border-radius: 40rpx;
		color: #fff;
	}
	.time{
		min-width: 100rpx;
	}
	.timeColor{
		color: rgb(199, 197, 197);
	}

	.picker-view {
        width: 750rpx;
        height: 600rpx;
        margin-top: 20rpx;
    }
    .item {
        height: 50px;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
</style>
